<template>
	<view class="layout">
		<!-- 自定义头部 -->
		<view class="navbar" :style="{ backgroundColor: background}">
			<!-- 状态栏 -->
			<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
			<!-- 标题栏 -->
			<view class="titleBar" :style="{height:titleBarHeight+'px'}">
				<!-- 退回到上一级 -->
				<view class="title-back" v-if="isBack" @tap="BackPage">
					<up-icon name="arrow-left" color="#000000" width="18rpx" height="32rpx"></up-icon>
				</view>
				<view class="title-home" v-if="isHome" @tap="HomePage">
					<up-icon name="home-fill" color="#000000" width="18rpx" height="32rpx"></up-icon>
				</view>
				<view class="title">
					<slot name="content"></slot>
				</view>
				<!-- <slot name="right"></slot> -->
			</view>
		</view>
		<!-- 占位的 -->
		<view class="fill" v-if="needFill" :style="{ height:statusBarHeight+titleBarHeight+'px' }">

		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	let system = uni.getSystemInfoSync();
	const statusBarHeight = ref(system.statusBarHeight)
	console.log(statusBarHeight.value)
	console.log(system)
	// 到上面为止已经获取了状态栏高度
	// 然后让小程序的高度与胶囊按钮高度一样，用uniapp的api===》uni.getMenubutton
	let { top,height } = uni.getMenuButtonBoundingClientRect();
	// console.log(menubutton)
	console.log(top, height)
	// top代表胶囊按钮到顶部的距离，height代表胶囊按钮的高度
	let titleBarHeight = ref(height + (top - statusBarHeight.value) * 2)
	// 让父组件可以改
	defineProps({
		// title:{
		// 	type:String,
		// 	default:"首页"
		// },
		isBack: {
			type: [Boolean, String],
			default: false
		},
		isHome: {
			type: [Boolean, String],
			default: false
		},
		needFill: {
			type: [Boolean, String],
			default:true
		},
		background: {
		    type: String,
		    default: '#ffffff', // 默认背景颜色
		  }
	})

	function BackPage() {
		uni.navigateBack({
			delta: 1
		})
	}

	function HomePage() {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style scoped lang="scss">
	.layout {

		// 给navbar一个固定定位
		.navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			// background: #ffffff;

			.statusBar {
				// border: 1px solid red;
			}

			.titleBar {
				display: flex;
				padding: 0 30rpx;
				// border: 1px solid green;
				align-items: center;

				.title-back {
					width: 18rpx;
					height: 32rpx;
					line-height: 32rpx;
					// border: 1px solid red;
				}

				.title-home {
					width: 18rpx;
					height: 32rpx;
					line-height: 32rpx;
					margin-left: 10rpx;padding: 0 0 0 10rpx;
				}

				.title {
					font-size: 35rpx;
					font-weight: 400;
					color: #000;
					margin-left: 257rpx;
				}
			}
		}
	}
</style>